<template>
  <div class="wrap_luxian1">
     <header>
       <p><img src="../assets/img/left@2x.png" ></p>
       <p>路线</p>
       <p></p>
     </header>
      <div id="forms">
        <form>
          <div class="foms_cnt">
            <div class="icon_cnt">
              <img src="../assets/img/back_en@2x.png" >
            </div>
            <div class="cnt_pnt">
              <p><img src="../assets/img/green@2x.png" /><input type="text" name="" placeholder="请输入起点"/></p>
              <p><img src="../assets/img/red@2x.png" /><input type="text" name="" placeholder="请输入终点"/></p>
            </div>
          </div>
          <div class="btn">
              <input type="button" name="" value="下一步">
          </div>
        </form>
      </div>
      <div class="the_dress">
        <div class="edit_dress">
          <p>常用地址</p>
          <p>编辑</p>
        </div>
        <div class="edit_list">
          <ul>
            <li><img src="../assets/img/add@2x.png">点击添加地址</li>
            <li><img src="../assets/img/add@2x.png">点击添加地址</li>
            <li><img src="../assets/img/add@2x.png">点击添加地址</li>
            <li><img src="../assets/img/add@2x.png">点击添加地址</li>
          </ul>
        </div>
      </div>
      <div class="histroy">
        <p><img src="../assets/img/line.png"></p>
        <p>暂无历史记录</p>
        <p><img src="../assets/img/line.png"></p>
      </div>
      <div class="histroy_cnt">
        <ul>
          <li>北京市通州区北苑138号小区遍物流园北京市通州区北苑138号小区遍物流园</li>
          <li>北京市通州区北苑138号小区遍物流园北京市通州区北苑138号小区遍物流园</li>
          <li>北京市通州区北苑138号小区遍物流园北京市通州区北苑138号小区遍物流园</li>
        </ul>
      </div>
      <div class="mask"></div>
      <div class="dialoguer">
        <div class="inner">
          <p>请打开手机定位，获取<br>“我的位置”</p>
          <p><span>确定</span><span>取消</span></p>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'wrap_luxian1',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.wrap_luxian1{
  height: 100%;
  /* background: #f7f7f7; */
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  }
  #forms {
    background: #fbfafa;
    .padding-bottom(50);
    .foms_cnt {
      display: flex;
     .px2rem(height,184);
     align-items: center;
      .icon_cnt {
        .padding-left(38);
        img {
          .px2rem(height,68);
          .px2rem(width,68);
        }
      }
      .cnt_pnt {
        .padding-left(32);
        width: 100%;
        p {
          width: 100%;
          .px2rem(height,92);
          /* .border(1,solid,#000); */
          display: flex;
          align-items: center;
          img {
            .px2rem(height,16);
            .px2rem(width,16);
          }
          &:nth-child(1){
            .border-bottom(1,solid,#dddcdc);
          }
          input {
            width: 100%;
            background: #fbfafa;
            .px2rem(height,32);
            border: none;
            .padding-left(24);
          }
        }
      }
    }
    .btn {
      .px2rem(height,78);
      width: 92%;
      margin: auto;
      .margin-top(48);
      input {
        height: 100%;
        width: 100%;
        border: none;
        .font(28,#fff);
        font-weight: bold;
      }
    }
  }
  .the_dress {
    width: 92%;
    margin: auto;
    .edit_dress{
      .px2rem(height,116);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .font(26,#989898);
      .border-bottom(1,dashed,#a3a3a3);
      p:nth-child(2){
        .padding(10,40,10,40);
        .border(2,solid,#4aba80);
      }
    }
    .edit_list {
      ul {
        display: flex;
        .font(26,#989898);
        flex-wrap: wrap;
        .margin-top(17);
        justify-content: space-between;
       li {
        .padding(20,36,20,36);
        .border(2,solid,#b9b9b9);
        .margin-top(36);
        .border-radius(4);
        display: flex;
        align-items: center;
        /* &:nth-child(even) {
          .margin-left(142);
        } */
          img {
            display: block;
            .margin-right(10);
            .px2rem(height,32);
            .px2rem(width,32);
          }
        }
      }
    }
  }
  .histroy {
    width: 92%;
    margin: auto;
    .margin-top(90);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .px2rem(height,50);
    .font(20,#e5e5e5);
    display: none;
    p {
      img {
        .px2rem(height,1);
        .px2rem(width,250);
      }
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background:rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 1000;
  }
  .histroy_cnt {
    width: 92%;
    margin: auto;
    ul {
      li {
        .font(24,#747474);
        /* .line-height(30); */
        .border-bottom(1,solid,#e0e0e0);
        .padding(40,0,20,0);
      }
    }
  }
  .dialoguer {
    display: none;
    width: 60%;
    position: fixed;
    left: 50%;
    top: 50%;
    background: #fff;
    margin-left: -30%;
    margin-top: -25%;
   .border(1,solid,#000);
   .border-radius(10);
    z-index: 1001;
    .inner {
      display: flex;
      flex-direction: column; 
      /* justify-content: center; */
      /* align-items: center; */
      margin: auto;
      width: 70%;
      p:nth-child(1){
        .font(30,#333);
        .line-height(50);
        /* .px2rem(width,320); */
        .margin-top(60);
        text-align: center;
      }
      p:nth-child(2){
        display: flex;
        .margin-top(30);
        .margin-bottom(50);
        justify-content: space-between;
        span {
          display: block;
          .padding(10,28,10,28);
          .border-radius(8);
          &:nth-child(1){
            background: #21d095;
            color: #fff;
          }
          &:nth-child(2){
            background: #e8e8e8;
            color: #787878;
          }
        }
      }
    }
  }
}
</style>
